/**
*@Author: 周贞荣
*@Date 2021/8/17 17:55
*@Description 富文本编辑器
*@File LabelValue.vue 文件名称
*/
<template>
    <div id="zzrEdit"></div>
</template>

<script>
    import E from 'wangeditor';

    export default {
        name: 'MyEditor',
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                editor: null
            }
        },
        methods: {
            /**
             * 上传视频或图片并插入文本
             * @param localFiles 本地文件
             * @param insertFn 插入编辑器方法
             */
            updateFile(localFiles, insertFn) {
                const formData = new FormData();
                formData.append('file', localFiles[0]);
                this.httpClient.file(this.api.editorFile, formData, insertFn, () => (this.$message.warning("上传失败")));
            },
            setHtml(html) {
                this.editor.txt.html(html)
            }
        },
        mounted() {
            const editor = new E('#zzrEdit');
            this.editor = editor;
            // 配置 server 接口地址
            editor.config.uploadImgMaxLength = 1;
            // 自定义插入图片
            editor.config.customUploadImg = this.updateFile;
            // 自定义插入视频
            editor.config.customUploadVideo = this.updateFile;
            // html变化回调函数
            editor.config.onchange = newHtml => (this.$emit('input', newHtml));
            editor.create()
        }
    }
</script>
<style lang="scss">
    #zzrEdit {
        table {
            td, th {
                padding: 10px 5px;
            }
            th {
                border-bottom: 0;
            }
        }
    }
</style>
